React useOptimistic: Dominando las actualizaciones optimistas

En el mundo del desarrollo web moderno, ofrecer una experiencia de usuario fluida y receptiva es primordial. Los usuarios esperan que las aplicaciones reaccionen instantáneamente a sus acciones, incluso cuando se trata de operaciones asíncronas como las solicitudes de red. El hook useOptimistic de React proporciona un mecanismo poderoso para lograr esto, permitiéndote crear actualizaciones optimistas que hacen que tu UI se sienta más rápida y receptiva.

¿Qué son las actualizaciones optimistas?

Las actualizaciones optimistas son un patrón de UI donde actualizas inmediatamente la interfaz de usuario para reflejar el resultado de una acción antes de que se complete la operación correspondiente del lado del servidor. Esto crea la ilusión de retroalimentación instantánea, ya que el usuario ve los cambios de inmediato. Si la operación del servidor es exitosa, la actualización optimista se convierte en el estado real. Sin embargo, si la operación falla, debes revertir la actualización optimista al estado anterior y manejar el error con elegancia.

Considera estos escenarios donde las actualizaciones optimistas pueden mejorar significativamente la experiencia del usuario:

• Añadir un comentario: Muestra el nuevo comentario inmediatamente después de que el usuario lo envíe, sin esperar a que el servidor confirme el guardado exitoso.
• Darle me gusta a una publicación: Incrementa el contador de me gusta instantáneamente cuando el usuario hace clic en el botón de me gusta.
• Eliminar un elemento: Elimina el elemento de la lista inmediatamente, proporcionando retroalimentación visual inmediata.
• Enviar un formulario: Muestra un mensaje de éxito inmediatamente después de enviar el formulario, incluso mientras los datos se están procesando en el servidor.

Presentando React useOptimistic

El hook useOptimistic de React, introducido en React 18, simplifica la implementación de actualizaciones optimistas. Proporciona una forma limpia y declarativa de administrar el estado optimista y manejar posibles errores.

Sintaxis

El hook useOptimistic toma dos argumentos:

            const [optimisticState, addOptimistic] = useOptimistic(
  initialState,
  (currentState, update) => newState
);
            

              
                Copy
              
            
          

• initialState: El valor inicial del estado.
• (currentState, update) => newState: Una función de actualización que toma el estado actual y un valor de actualización como argumentos y devuelve el nuevo estado. Esta función se llama cada vez que se aplica una actualización optimista.

El hook devuelve un array que contiene:

• optimisticState: El estado actual, que incluye tanto el estado real como cualquier actualización optimista aplicada.
• addOptimistic: Una función que acepta un valor de actualización y lo aplica al estado de forma optimista. El argumento pasado a addOptimistic luego se pasa a la función de actualización.

Un ejemplo práctico: Añadiendo comentarios

Ilustremos el uso de useOptimistic con un ejemplo concreto: añadir comentarios a una publicación de blog.

            import React, { useState, useOptimistic } from 'react';

function CommentList({ postId, initialComments }) {
  const [comments, setComments] = useState(initialComments);
  const [optimisticComments, addOptimistic] = useOptimistic(
    comments,
    (currentComments, newComment) => [...currentComments, newComment]
  );

  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    const text = event.target.elements.comment.value;

    const newComment = {
      id: `optimistic-${Date.now()}`, // ID Temporal
      postId: postId,
      text: text,
      author: 'Tú', // Marcador de posición
      createdAt: new Date().toISOString(),
      isOptimistic: true // Indicador para identificar comentarios optimistas
    };

    addOptimistic(newComment);

    try {
      // Simula una llamada API para guardar el comentario
      await new Promise(resolve => setTimeout(resolve, 1000)); // Simula latencia de red
      const response = await fetch(`/api/posts/${postId}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text })
      });

      if (!response.ok) {
        throw new Error('Failed to save comment');
      }

      const savedComment = await response.json();

      // Reemplaza el comentario optimista con el comentario guardado real
      setComments(prevComments =>
        prevComments.map(comment =>
          comment.id === newComment.id ? savedComment : comment
        )
      );

    } catch (error) {
      console.error('Error saving comment:', error);
      // Revierte la actualización optimista filtrando el comentario temporal
      setComments(prevComments => prevComments.filter(comment => comment.id !== newComment.id));
      alert('Failed to save comment. Please try again.'); // Proporciona retroalimentación al usuario
    } finally {
      setIsSubmitting(false);
      event.target.reset();
    }
  };

  return (
    

      
Comentarios
      

        
        Enviar
      
      

        {optimisticComments.map(comment => (
          

            {comment.author} - {comment.text}
            {comment.isOptimistic &&  (Enviando...)}
          
        ))}
      
    
  );
}

export default CommentList;
            

              
                Copy
              
            
          

Explicación

1. Inicialización: Inicializamos comments usando useState con los comentarios iniciales para la publicación. Inicializamos optimisticComments usando useOptimistic, pasando los comentarios iniciales y una función de actualización. La función de actualización simplemente agrega el nuevo comentario a la lista existente de comentarios.
2. Actualización optimista: Cuando el usuario envía un comentario, inmediatamente llamamos a addOptimistic, que agrega el nuevo comentario al estado optimisticComments. La UI se actualiza para mostrar el nuevo comentario de inmediato. También establecemos un indicador isOptimistic para que podamos indicar que el comentario se está publicando.
3. Guardado en el servidor: Luego hacemos una llamada API (simulada con setTimeout en este ejemplo) para guardar el comentario en el servidor.
4. Manejo del éxito: Si el guardado en el servidor es exitoso, recibimos el comentario guardado del servidor. Luego actualizamos el estado comments reemplazando el comentario optimista con el comentario guardado real, que incluye el ID asignado por el servidor y otra información relevante.
5. Manejo de errores: Si el guardado en el servidor falla, capturamos el error y revertimos la actualización optimista filtrando el comentario temporal del estado comments. También mostramos un mensaje de error al usuario.
6. Mostrar: La UI muestra los optimisticComments.

Manejo de escenarios más complejos

El ejemplo anterior demuestra un escenario simple. En escenarios más complejos, es posible que debas manejar actualizaciones de elementos existentes, eliminaciones u otras manipulaciones de estado más intrincadas. La clave es asegurarte de que tu función de actualización pasada a useOptimistic maneje correctamente estos escenarios.

Actualización de elementos existentes

Supongamos que deseas permitir que los usuarios editen sus comentarios. Deberías actualizar la función de actualización para encontrar y reemplazar el comentario existente con la versión actualizada.

            const [optimisticComments, addOptimistic] = useOptimistic(
  comments,
  (currentComments, updatedComment) => {
    return currentComments.map(comment => {
      if (comment.id === updatedComment.id) {
        return updatedComment;
      } else {
        return comment;
      }
    });
  }
);
            

              
                Copy
              
            
          

Eliminación de elementos

De manera similar, si deseas permitir que los usuarios eliminen comentarios, deberías actualizar la función de actualización para filtrar el comentario eliminado.

            const [optimisticComments, addOptimistic] = useOptimistic(
  comments,
  (currentComments, deletedCommentId) => {
    return currentComments.filter(comment => comment.id !== deletedCommentId);
  }
);
            

              
                Copy
              
            
          

Mejores prácticas para usar useOptimistic

Para aprovechar eficazmente useOptimistic y construir aplicaciones robustas, considera estas mejores prácticas:

• Identifica las actualizaciones optimistas: Marca claramente las actualizaciones optimistas en tu estado (por ejemplo, usando un indicador isOptimistic) para diferenciarlas de los datos reales. Esto te permite mostrar señales visuales apropiadas (por ejemplo, un indicador de carga) y manejar posibles reversiones con elegancia.
• Proporciona retroalimentación visual: Hazle saber al usuario que la actualización es optimista y que podría estar sujeta a cambios. Esto ayuda a gestionar las expectativas y evita confusiones si la actualización falla. Considera usar animaciones sutiles o estilos para distinguir visualmente las actualizaciones optimistas.
• Maneja los errores con elegancia: Implementa un manejo de errores robusto para revertir las actualizaciones optimistas cuando la operación del servidor falla. Muestra mensajes de error informativos al usuario y proporciona opciones para reintentar la operación.
• Asegura la consistencia de los datos: Presta mucha atención a la consistencia de los datos, especialmente cuando se trata de estructuras de datos complejas o múltiples actualizaciones simultáneas. Considera usar técnicas como el bloqueo optimista en el lado del servidor para evitar actualizaciones conflictivas.
• Optimiza el rendimiento: Si bien las actualizaciones optimistas generalmente mejoran el rendimiento percibido, ten en cuenta los posibles cuellos de botella en el rendimiento, especialmente cuando se trata de grandes conjuntos de datos. Utiliza técnicas como la memorización y la virtualización para optimizar el renderizado.
• Prueba exhaustivamente: Prueba exhaustivamente tus implementaciones de actualización optimista para asegurarte de que se comporten como se espera en varios escenarios, incluidos los casos de éxito, fracaso y casos límite. Considera usar bibliotecas de pruebas que te permitan simular la latencia de la red y los errores.

Consideraciones globales

Al implementar actualizaciones optimistas en aplicaciones utilizadas globalmente, considera lo siguiente:

• Latencia de la red: Diferentes regiones del mundo experimentan diferentes latencias de red. Las actualizaciones optimistas se vuelven aún más cruciales en las regiones con alta latencia para proporcionar una experiencia de usuario receptiva.
• Residencia y cumplimiento de datos: Ten en cuenta los requisitos de residencia y cumplimiento de datos en diferentes países. Asegúrate de que tus actualizaciones optimistas no violen inadvertidamente estos requisitos. Por ejemplo, evita almacenar datos confidenciales en el estado optimista si viola las regulaciones de residencia de datos.
• Localización: Asegúrate de que cualquier retroalimentación visual o mensajes de error relacionados con las actualizaciones optimistas estén correctamente localizados para diferentes idiomas y regiones.
• Accesibilidad: Asegúrate de que las señales visuales que indican actualizaciones optimistas sean accesibles para usuarios con discapacidades. Utiliza atributos ARIA y HTML semántico para proporcionar contexto e información apropiados.
• Zonas horarias: Si tu aplicación muestra fechas u horas relacionadas con las actualizaciones optimistas, asegúrate de que se muestren en la zona horaria local del usuario.

Alternativas a useOptimistic

Si bien useOptimistic ofrece una forma conveniente de implementar actualizaciones optimistas, no es el único enfoque. Otras alternativas incluyen:

• Gestión manual del estado: Puedes implementar actualizaciones optimistas utilizando los hooks estándar useState y useEffect. Este enfoque te da más control sobre la implementación, pero requiere más código repetitivo.
• Bibliotecas de gestión del estado: Las bibliotecas como Redux, Zustand y Jotai también se pueden utilizar para implementar actualizaciones optimistas. Estas bibliotecas proporcionan capacidades de gestión del estado más sofisticadas y pueden ser útiles para aplicaciones complejas.
• Bibliotecas GraphQL: Las bibliotecas GraphQL como Apollo Client y Relay a menudo proporcionan soporte integrado para actualizaciones optimistas a través de sus mecanismos de almacenamiento en caché.

Conclusión

El hook useOptimistic de React es una herramienta valiosa para construir interfaces de usuario receptivas y atractivas. Al aprovechar las actualizaciones optimistas, puedes proporcionar a los usuarios retroalimentación instantánea y crear una experiencia más fluida. Recuerda considerar cuidadosamente el manejo de errores, la consistencia de los datos y las consideraciones globales para asegurarte de que tus actualizaciones optimistas sean robustas y efectivas.

Al dominar el hook useOptimistic, puedes llevar tus aplicaciones React al siguiente nivel y ofrecer una experiencia de usuario verdaderamente excepcional para tu audiencia global.